<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .dialog{
            background: #eee;
            padding:20px;
            width:300px;
            position: absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <!-- <div class="dialog">
        <h1>标题</h1>
        <div class="btns">
            <button>确定</button>
            <button>取消</button>
        </div>
    </div> -->
    <script>
        class Dialog{
            constructor(options){
                this.options = options;
                this.init();
            }

            init(){
                this.createDialog();
                this.addEvent();
            }

            addEvent(){
                let btns = [...this.parentNode.querySelectorAll('button')];
                btns.forEach((item,index) => {
                    item.onclick = this.options[`cb${index}`].bind(this);
                })
            }

            createDialog(){
                this.parentNode = document.createElement('div');
                this.parentNode.classList.add('dialog');

                let {title,btns} = this.options;

                this.parentNode.innerHTML = `
                    <h1>${title}</h1>
                    <div class="btns">
                        ${btns.map(item => `<button>${item}</button>`).join('')}
                    </div>
                `
                document.body.appendChild(this.parentNode);
            }
        }

        new Dialog({
            title:'确定是否要删除?',
            btns:['确定','取消'],
            cb0(){
                console.log("第一个按钮，确定");
                // ajax()
            },
            cb1(){
                console.log("第二个按钮，取消");
                document.body.removeChild(this.parentNode);
            }
        })

        //继承类

        class DragDialog extends Dialog{
            constructor(options){
                super(options);
                this.drag();
            }
            drag(){
                this.parentNode.onmousedown = (e) => {
                    console.log(e.clientX,e.clientY);
                    let {x,y} = {x:e.clientX - this.parentNode.offsetLeft,y:e.clientY-this.parentNode.offsetTop};
                    console.log(x,y);
                    document.onmousemove = (event) => {
                        let {left,top} = {left:event.pageX-x,top:event.pageY-y};
                        this.parentNode.style.left = `${left}px`;
                        this.parentNode.style.top = `${top}px`;
                    }
                }
                this.parentNode.onmouseup = () => {
                    document.onmousemove = null;
                }
            }
        }

        new DragDialog({
            title:'确定是否要删除?',
            btns:['确定','取消'],
            cb0(){
                console.log("第一个按钮，确定");
                // ajax()
            },
            cb1(){
                console.log("第二个按钮，取消");
                document.body.removeChild(this.parentNode);
            }
        })
    </script>
</body>
</html>